<template>
  <div class="w-[120px] bg-[#fff] h-full shrink-0 overflow-y-scroll pt-[16px] text-[13px] px-[8px]">
    <div
      class="h-[38px] w-full flex items-center pl-[8px] item"
      v-for="(item, index) in componentList"
      :key="index"
      :class="curIndex === index ? 'active' : ''"
      @click="changeType(index)"
    >
      <span class="cursor-pointer px-[8px] py-[3px] rounded-[50px] hover:bg-[#EDF1F5] isCompoenent"> {{ item.label }} </span>
    </div>
  </div>
</template>

<script setup lang="ts">
const emit = defineEmits(['getComponentType']);
const componentList = [
  {
    type: 'image',
    label: '图片',
    isCompoenent: true
  },
  {
    type: 'input',
    label: '文本',
    isCompoenent: true
  },
  {
    type: 'wechatApplet',
    label: '微信小程序',
    isCompoenent: true
  }
];
const curIndex = ref(0);

const changeType = (i: number) => {
  curIndex.value = i;
  emit('getComponentType', componentList[i].type);
};
</script>

<style lang="scss" scoped>
.item {
  &.active {
    .isCompoenent {
      background-color: #4d8fff;
      color: #fff;
    }
  }
}
</style>
